import { onMounted, reactive, ref } from 'vue'
import { getUserList, roleAllList } from '@/api/permission'


export function userList() {

    // 列表加载状态
    let loading = ref<boolean>(true)

    // 数据列表
    const tableData = reactive<any>([])

    // 所有角色列表
    const roleAllListData = reactive<any>([])

    // 选中角色
    const selectRoleValue = ref<any>()

    // 总条数
    let pageTotal = ref<number>(0)

    // 分页信息（size:每页显示多少条，page当前页）
    let getData = reactive<any>({
        size: 10,
        page: 1
    })
    // 挂载完加载
    onMounted(() => {
        getMenuAllListData()
        roleAllListtData()
    })

    // 添加菜单、子菜单、编辑时重新请求数据
    const resetMenuListData = async () => {
        tableData.length = 0
        pageTotal.value = 0
        await getMenuAllListData()
    }

    // 获取列表
    const getMenuAllListData = async () => {
        loading.value = true
        const { data: { list, page, total } } = await getUserList('/permission/userList', getData)
        list.map((item:any)=>{
            item.switch = item.is_show == 0 ? true : false
        })
        Object.assign(tableData, list)
        pageTotal.value = total
        setTimeout(() => {
            loading.value = false
        }, 150)
    }

    // 获取所有列表
    const roleAllListtData = async () => {
        const { data } = await roleAllList('/permission/roleAllList')
        Object.assign(roleAllListData, data)
    }

    // 页面改变重新请求列表
    const handleCurrentChange = async (val: number) => {
        getData.page = val
        tableData.length = 0
        getMenuAllListData()
    }

    return {
        loading,  //表格加载中
        selectRoleValue, //选中角色
        roleAllListData, //所有角色列表
        tableData, //表格数据
        pageTotal, //数据总条数
        getData,    //分页信息
        handleCurrentChange, // 页码改变重新请求列表
        resetMenuListData, //重新请求数据
    }
}